<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>涂鸦</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <div id="controls">
        选择颜色：
        <select id="color">
            <option value="black">黑色</option>
            <option value="red">红色</option>
            <option value="yellow">黄色</option>
            <option value="blue">蓝色</option>
            <option value="green">绿色</option>
        </select>
        画笔大小：
        <input id="fontSlider" type="range" min="1" max="10.0" step=".1" value="1.0" />
        <output id="fontOutput">1.0</output>
        <button id="clear">重画</button>
        <button id="save">保存</button>
    </div>

    <canvas id="canvas">
        Canvas not supported
    </canvas>

    <script type="text/javascript" src="./base64.js"></script>
    <script type="text/javascript" src="./canvas2image.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),

            image = new Image,
            dragging = false,
            margin = 20,
            fontWidth = 1
            fontColor = "red";


        image.src = "erkang.jpg";
        image.onload = function(){
            canvas.width = image.width;
            canvas.height = image.height;
            drawImage();
        }

        function windowToCanvas(e){
            var bbox = canvas.getBoundingClientRect();
            if(e.type.indexOf("touch")>=0){
                e = e.touches[0]
            }
            return {
                x:e.clientX - bbox.left*(canvas.width/bbox.width),
                y:e.clientY - bbox.top*(canvas.height/bbox.height)
            }
        }

        function drawImage(){
            context.drawImage(image, 0, 0);
        }

        var lastP = null;
        function drawLine(p){
            context.lineCap = "round";
            context.lineJoin = "round";
            context.beginPath();
            context.lineWidth = fontWidth;
            context.strokeStyle = fontColor
            context.moveTo(lastP.x, lastP.y);
            context.lineTo(p.x, p.y);
            context.stroke();
        }


        document.getElementById("clear").onclick = function(){
            context.clearRect(0,0,canvas.width,canvas.height);        
            drawImage();    
        }

        document.getElementById("color").onchange = function(e){
            fontColor = e.currentTarget.value?e.currentTarget.value:fontColor;
        }

        document.getElementById("fontSlider").onchange = function(e){
            e.preventDefault();
            fontWidth = e.currentTarget.value?e.currentTarget.value:fontWidth;
            document.getElementById("fontOutput").value = fontWidth;
        }

        canvas.addEventListener("touchstart", function(e){
            e.preventDefault();
            dragging = true;
        })
        canvas.oumousedown = function(e){
            e.preventDefault();
            dragging = true;
        }

        canvas.addEventListener("touchmove", function(e){
            if(dragging){
                e.preventDefault();
                var p =windowToCanvas(e);

                if(lastP){
                    drawLine(p);
                    lastP = p;
                }else{
                    lastP = p;
                }
            }
        })
        canvas.onmousemove = function(e){
            if(dragging){
                e.preventDefault();
                var p =windowToCanvas(e);

                if(lastP){
                    drawLine(p);
                    lastP = p;
                }else{
                    lastP = p;
                }
            }
        }

        canvas.addEventListener("touchend", function(e){
            lastP = null;
            dragging = false;
        })
        canvas.onmouseup = function(e){
            lastP = null;
            dragging = false;
        }

        document.getElementById("save").onclick = function(e){
            e.preventDefault();
            Canvas2Image.saveAsPNG(canvas);
        }
    </script>
</body>
</html>